
#up-map-div1 {
width:300px;
height:100px;
top:30px;
left:30px;
position:absolute;
z-index:9999;
border:1px solid blue;
background-color:#FFFFFF;
        }
        /*第一列*/
        div.grandpa1{
            width: 25%;
            height:100%;
            background-color: #050a2a;
            position: absolute;
        }
        div.father1{
            width:100%;
            height:9%;
            top:1%;
            position: absolute;
            background-color: #050a2a;
        }
        div.father11{
            width:100%;
            height:29%;
            top:11%;
            left:0px;
            position: absolute;
            background-color: #050a2a;
            border:2px solid #322d71;
            /*border-radius:10px 10px 10px 10px;*/
    position: absolute; 
    background: linear-gradient(to left, #70eaf2, #70eaf2) left top no-repeat, 
                linear-gradient(to bottom, #70eaf2, #70eaf2) left top no-repeat, 
                linear-gradient(to left, #70eaf2, #70eaf2) right top no-repeat,
                linear-gradient(to bottom, #70eaf2, #70eaf2) right top no-repeat, 
                linear-gradient(to left, #70eaf2, #70eaf2) left bottom no-repeat,
                linear-gradient(to bottom, #70eaf2, #70eaf2) left bottom no-repeat,
                linear-gradient(to left, #70eaf2, #70eaf2) right bottom no-repeat,
                linear-gradient(to left, #70eaf2, #70eaf2) right bottom no-repeat;
    background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;  
        }
        div.father12{
            width:100%;
            height:29%;
            top:41%;
            left:0px;
            position: absolute;
            background-color: #050a2a;
            border:1px solid #322d71;
        }

        div.father13{
            width:100%;
            height:29%;
            top:71%;
            left:0px;
            position: absolute;
            background-color: #050a2a;
            border:1px solid #322d71;
        }
        
        div.father131{
            width:100%;
            height:80%;
            top:21%;
            left:0px;
            position: absolute;
        }
        /*第二列*/
        
        div.grandpa2{
            width: 47.5%;
            height:100%;
            left:26.5%;
            background-color: #050a2a;
            position: absolute;
        }
        div.father21{
            width:100%;
            height:12%;
            top:1%;
            position: absolute;
            background-color: #050a2a;
        }

        div.father22{
            width:100%;
            height:88%;
            top:10.9%;
            border:1px solid #322d71;
            /*position: absolute;*/
            /*background-color: blue;*/
        }

        /*第三列*/
        
        div.grandpa3{
            width: 25%;
            height:100%;
            right:0px;
            background-color: #050a2a;
            position: absolute;
        }
        div.father3{
            width:100%;
            height:9%;
            top:1%;
            position: absolute;
            background-color: #050a2a;
        }
        div.father31{
            width:100%;
            height:29%;
            top:11%;
            right: 0px;
            position: absolute;
            background-color: #050a2a;
            border:1px solid #322d71;
        }
        div.father311{
            width:100%;
            height:100%;
            top:11%;
            right: 0px;
            position: absolute;
        }

        div.father32{
            width:100%;
            height:29%;
            top:41%;
            right: 0px;
            position: absolute;
            background-color: #050a2a;
            border:1px solid #322d71;
        }

        div.father33{
            width:100%;
            height:29%;
            top:71%;
            right: 0px;
            position: absolute;
            background-color: #050a2a;
            border:1px solid #322d71;
        }

       
        div.son{
            width:50px;
            height: 50px;
            right: 0px;
            bottom:0px;
            position: absolute;
            background-color: green;
        }

        /*进度条*/
        #wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在进度条元素上调用动画*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}